<template>
  <div class="B">
    B2
    <button @click="change">change</button>
    <input type="text" v-model="data" />
    noFind
  </div>
</template>

<script setup lang="ts">
import { inject, ref } from 'vue'
// export declare function inject<T>(key: InjectionKey<T> | string): T | undefined;

// export declare function inject<T>(key: InjectionKey<T> | string, defaultValue: T, treatDefaultAsFactory?: false): T;

// export declare function inject<T>(key: InjectionKey<T> | string, defaultValue: T | (() => T), treatDefaultAsFactory: true): T;

// ⬆ 源码
let data = inject('noFind', ref(false))

// 第一个参数是注入的 key。Vue 会遍历父组件链，通过匹配 key 来确定所提供的值。如果父组件链上多个组件对同一个 key 提供了值，那么离得更近的组件将会“覆盖”链上更远的组件所提供的值。如果没有能通过 key 匹配到值，inject() 将返回 undefined，除非提供了一个默认值。
//第二个参数是可选的，即在没有匹配到 key 时使用的默认值。它也可以是一个工厂函数，用来返回某些创建起来比较复杂的值。如果默认值本身就是一个函数，那么你必须将 false 作为第三个参数传入，表明这个函数就是默认值，而不是一个工厂函数。

const change = () => {
  data.value = !data.value
}
</script>

<style lang="scss" scoped>
@import '../style.scss';

.B {
  width: 180px;
  height: 200px;
  background-color: $cloud-water;
}
</style>